<!DOCTYPE html>
<html>
<head>
<script id="vertex-shader" type="x-shader/x-vertex">
    attribute vec4 vPosition;
    void main()
    {
        gl_Position = vPosition;
    }
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 fColor;
    void main()
    {
        gl_FragColor = fColor;
    }
</script>
<script type="text/javascript" src="../common/webgl-utils.js"></script>
<script type="text/javascript" src="../common/initShaders.js"></script>
<script type="text/javascript" src="../common/MV.js"></script>
<script type="text/javascript" src="../mylib/jquery.min.js"></script>
<script type="text/javascript" src="cad-pen.js"></script>
</head>
<body>
    <canvas id="gl-canvas" width="512" height="512" style="border: 1px solid">
        Oops ... 你的浏览器不支持HTML5 Canvas！
    </canvas>
    <div>
        <label>Window Coordinates</label>
        X: <span id="window-x">0</span>
        Y: <span id="window-y">0</span>
    </div>
    <div>
        <label>Clip Coordinates</label>
        X: <span id="clip-x">0</span>
        Y: <span id="clip-y">0</span>
    </div>
    <div>
        Color: 
        <input type="radio" name="color" id="color_black" checked="checked"/>Black
        <input type="radio" name="color" id="color_red"/>Red
        <input type="radio" name="color" id="color_green"/>Green
        <input type="radio" name="color" id="color_blue"/>Blue
    </div>
    <div>
        Line Width: 
        <input id="slider" type="range" min="1" max="10" step="1" value="1" />
        <span id="current_slider">1 px</span>
    </div>
    <div>Tips: Tested on Archlinux with Firefox/Chrome and Win 8.1 with IE11/Firefox/Chrome.</div>
    <div>&nbsp;&nbsp;&nbsp;"Line Width" not work on Windows</div>
</body>
</html>
